<!DOCTYPE html>
<html lang="zh-cn">
 <head>
  <meta charset="UTF-8">
  <style>
   .c{display: flex;
      justify-content: center;
      align-items: center;}
   /* .t{text-align:center;height:50%;} */
   .time{font-size:20px;}
   .date{font-size:20px;}
  </style>
 </head>
 <body class='c'>
  <div>
   <div class="date"></div>
   <div class="time"></div>
  </div>
  <script>
   function updateClock() {
    let now = new Date();
    let w=['日','一','二','三','四','五','六'];
    document.querySelector('.date').textContent = now.getFullYear()+'年'+(now.getMonth()+1)+'月'+now.getDate()+'日 星期'+w[now.getDay()];
    document.querySelector('.time').textContent = (now.getHours() % 12 || 12)+':'+now.getMinutes()+':'+now.getSeconds()+(now.getHours() < 12 ? ' AM' : ' PM');
   }
   setInterval(updateClock, 1000);
   updateClock();
  </script>
 </body></html>